<template>
  <div>
    <!-- 头部导航 -->
    <div class="title">
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tops">
      <div class="xiangyou" @click="returns">&lt;</div>
      <div>店铺分页管理</div>
    </div>
    <!-- 底部表格 -->
    <div class="bottoms_list">
      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#F6F6F6', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
        <el-table-column  label="图片" width="200">
          <template v-slot="{ row }">
            <div class="image"><img :src="row.imgs" alt="" /></div>
          </template>
        </el-table-column>
        <el-table-column fixed prop="checkname" label="显示名称" width="200"> </el-table-column>
        <el-table-column prop="sort" label="排序" width="200"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="225">
          <template slot-scope="scope">
            <el-button @click="dianji(scope.row)" type="text" size="small">修改信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="修改分类名称" :visible.sync="dialogFormVisible">
        <!-- list的每一项 -->
          <div class="j_list">
            <div class="list_left"> 原名称</div>
            <div class="list_image">{{a}}</div>
          </div>
          <div class="j_list">
            <div class="list_left">修改：</div>
            <div class="list_image"><el-input v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <!-- 上传 -->
          <div class="items">
            <el-form :model="form">
              <el-form-item label="上传图片" >
                <el-upload class="upload-demo" action="http://127.0.0.1:7001/api/loadUp" :on-success="handleAvatarSuccess">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-form>
          </div>
          <el-form>
              <el-form-item label="排序" >
                <el-select v-model="form.sort" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-form>
        <div class="bottoms">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="navicons">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getupmydata,upmydatas } from '../../api/index'
export default {
  data() {
    return {
      //列表数据
      tableData: [],
      //表格数据
      dialogFormVisible: false,
      list:[],
      fileList: [],
      form:{
        sort:''
      },
      a:'',
      input: '',
      options: [
        { value: '1', label: '1' },
        { value: '2', label: '2' },
        { value: '3', label: '3' },
      ],
    }
  },
  created() {
    this.getbay()
  },
  methods: {
    //确定提交更改
    navicons(){
      if(this.fileList!= '' &&this.form.sort!=''&& this.value!= ''){
        upmydatas({
        id:this.list.id,
        imgs:this.fileList,
        sort:this.form.sort,
        checkname:this.value
      }).then(()=>{
        this.dialogFormVisible = false,
        this.value = '',
        this.form.sort ='',
        this.fileList ='',
        this.getbay()
      })
      }
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      this.fileList.push('http://127.0.0.1:7001' + res.data)
    },
    //点击获取列数
    dianji(row){
      this.dialogFormVisible = true,
      this.list = row
    },
    //获取导航数据
    getbay() {
      getupmydata().then((res) => {
        this.tableData = res.data
        this.a = this.tableData[0].checkname
      })
    },
   
    //路由跳转
    returns() {
      this.$router.push({
        name: 'index',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 10px;
}
//头部
.tops {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 40px;
  text-indent: 20px;
  .xiangyou {
    font-size: 20px;
    cursor: pointer;
  }
}

//底部表格
.bottoms_list {
  width: 830px;
  margin: 0 auto;
  .image {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
}

.bottoms{
  width: 200px;
  margin: 0 auto;
  margin-top: 20px;
}

.j_list{
  width: 200px;
  height: 50px;
  display: flex;
  text-align: center;
  line-height: 50px;
  .list_image{
    width: 100px;
    height: 30px;
    margin-left: 50px;
    img{
      width: 100%;
    }
  }
}
</style>
